@{
    ViewBag.Title = "对话框管理";
}
@section head{
   <script type="text/javascript" src="@Url.Content("~/Content/JavaScript/head_details.js")"></script>
   <script type="text/javascript">
       var currentCommand = null;  //当前执行状态
       var command={query:'query',show:'show',add:'add',editdetails:'editdetails'};
       var Page = {};   //查询参数
       var editRowIndex = undefined; //当前编辑的单身行下标
       var details;

       $(document).ready(function () {
           details=$('#details');
           details.parent('.datagrid-view').keydown(function (event) {
               switch (event.keyCode) {
                   case 38:   //光标上键
                       moveToRow(editRowIndex - 1);
                       break;
                   case 40:   //光标下键
                       moveToRow(editRowIndex + 1);
                       break;
               }
           });
           defaultSetting();
           query();
           // editdetails();
       });

       function defaultSetting() {
           $('[name]').attr('disabled', true).val(null);
           var disabledconstrols = '#btnEdit,#btnEditDetails,#btnDelete,#btnPageFirst,#btnPagePre,#btnPageTo,#btnPageNext,#btnPageLast';
           $(disabledconstrols).linkbutton('disable');
           $('#btnQuery,#btnAdd').linkbutton('enable');

           $('.commands').panel('close');
           $('#mainLayout').layout('resize');

           $('.easyui-validatebox').validatebox({ isValidate: false });
           $('.easyui-validatebox').validatebox('validate');

           var rows = details.datagrid('getRows');
           for (var i = 0; i < rows.length; i++) {
               details.datagrid('deleteRow', 0);
           }
       }

       function query_click() {
           defaultSetting();
           $('#btnQuery,#btnAdd').linkbutton('disable');
           $('.commands').panel('open');
           $('#mainLayout').layout('resize');

           $('#DialogCode,#Title').attr('disabled', false);
           currentCommand = command.query;
       }

       function query() {
           Page.where = $('#header').getValues();
           show(0);
       }

       function show(page) {
           Page.where.p = page;
           $.messager.progress();
           $.post(serverUrl.list, Page.where, function (data) {
               $.messager.progress('close');
               var json = show_txt_msg(data);
               if (json && json.success) {
                   if (currentCommand != command.show) {
                       defaultSetting();
                   }
                   $('#header').setValues(json.data);
                   var options = details.datagrid('options');
                   if (!options.url) options.url = '@Url.Action("DetailsList")';
                   details.datagrid('load', { DialogCode: json.data.DialogCode });
                   setPageNav(page, json.count);
                   $('#btnDelete,#btnEdit,#btnEditDetails').linkbutton('enable');
               }
               currentCommand = command.show;
           });
       }

       function add_click() {
           defaultSetting();
           $('.commands').panel('open');
           $('#mainLayout').layout('resize');
           $('[name]').attr('disabled', false);
           $('#btnQuery,#btnAdd').linkbutton('disable');

           $('.easyui-validatebox').validatebox({ isValidate: true });

           currentCommand = command.add;
       }

       function add() {
           $('#header').AjaxPost('@Url.Action("Add")', undefined, function (data) {
               $.messager.progress('close');
               var json = show_txt_msg(data);
               if (json && json.success) {
                   $('#header').setValues(json.data);
                   $('[name]').attr('disabled', false);
                   editdetails();
               }
           });
       }

       function edit_click() {
       }

       function editdetails() {
           var disabledconstrols = '#btnQuery,#btnEdit,#btnEditDetails,#btnPageFirst,#btnPagePre,#btnPageTo,#btnPageNext,#btnPageLast';
           $(disabledconstrols).linkbutton('disable');
           $('#btnAdd,#btnDelete').linkbutton('enable');
           $('.commands').panel('open');
           $('#mainLayout').layout('resize');

           currentCommand = command.editdetails;
           var selected = details.datagrid('getRowIndex', $('#details').datagrid('getSelected'));
           moveToRow(selected);
       }

       function endEditing() {
           if (editRowIndex == undefined) return true;
           if (details.datagrid('validateRow', editRowIndex)) {
               details.datagrid('endEdit', editRowIndex);
               
               editRowIndex = undefined;
               return true;
           }
           else {
               return false;
           }
      }

      function onAfterEdit(rowIndex, row, changes) {
          $.messager.progress();
          $.post('@Url.Action("DetailsAdd")', row, function (data) {
              $.messager.progress('close');
              var json = show_txt_msg(data);
              if (json && json.success) {
                  details.datagrid('updateRow', { index: rowindex, row: json.data });
              }
              else {
                  details.datagrid('deleteRow', rowindex);
              }
          });
      }

      function moveToRow(index) {
          if (currentCommand == command.editdetails && endEditing()) {
                var rows = details.datagrid('getRows');
                if (index > rows.length - 1) {
                    details.datagrid('appendRow', { Width: 100, Sort: 99, IsShow: true });
                    index = rows.length - 1;
                }
                if (index < 0) index = 0;
                details.datagrid('selectRow', index).datagrid('beginEdit', index);
                details.parent('.datagrid-view').find('[field=FieldKey] input')[0].focus();
                editRowIndex = index;
           }
        }


       function onClickRow(index,row){
          if(currentCommand==command.editdetails){
              onDblClickRow(index, row);
          }
       }

       function onDblClickRow(index, row) {
           editdetails();
       }

       function cancelDetails() {
          
       }

       function ondeleted() {
           show(Page.page);
       }

       function confirm_click() {
           switch (currentCommand) {
               case command.query:
                   query();
                   break;
               case command.add:
                   add();
                   break;
               case command.editdetails:
                  break;
           }
       }

       function cancel_click() {
           switch (currentCommand) {
               case command.query:
               case command.add:
                   defaultSetting();
                   break;
               case command.editdetails:
                   cancelDetails();
                   break;
           }
       }

   </script>
}
@section body{
<body style="padding:@ViewBag.Padding">
<div class="easyui-layout" id="mainLayout" data-options="fit:true">
    <div region="north" border="false">
        <div class="navigation">首页 > 对话框管理</div>
        <div class="tools_box1">
	        <div class="tools_bar">
                <div class="left">
                    <a href="javascript:void(0)" onclick="query_click()" id="btnQuery" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true ">查询</a>  
                    <a href="javascript:void(0)" onclick="add_click()"   id="btnAdd" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true ">添加</a>  
                    <a href="javascript:void(0)" onclick="edit_click()"  id="btnEdit" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true ">修改</a>  
                    <a href="javascript:void(0)" onclick="editdetails()"  id="btnEditDetails" class="easyui-linkbutton" data-options="iconCls:'icon-EditTable',plain:true ">单身</a> 
                    <a href="javascript:void(0)" onclick="Del($('#DialogCode').val(),serverUrl.del,null,ondeleted)"  id="btnDelete" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true">删除</a>
 
                    <a href="javascript:void(0)" onclick="show(0)" id="btnPageFirst" class="easyui-linkbutton" data-options="iconCls:'icon-PageFirst',plain:true ">第一页</a> 
                    <a href="javascript:void(0)" onclick="show(Page.page-1)"  id="btnPagePre" class="easyui-linkbutton" data-options="iconCls:'icon-PagePre',plain:true ">上一页</a> 
                    <a href="javascript:void(0)" onclick="PageTo()"  id="btnPageTo" class="easyui-linkbutton" data-options="iconCls:'icon-PageTo',plain:true ">指定页</a> 
                    <a href="javascript:void(0)" onclick="show(Page.page+1)"  id="btnPageNext" class="easyui-linkbutton" data-options="iconCls:'icon-PageNext',plain:true ">下一页</a> 
                    <a href="javascript:void(0)" onclick="show(Page.count)"   id="btnPageLast" class="easyui-linkbutton" data-options="iconCls:'icon-PageLast',plain:true ">最后页</a> 
                </div>
            </div>
        </div>
    </div>
    <div region="center" border="false">
    <div class="easyui-layout" data-options="fit:true" >
        <div region="north" border="false" id="header" style=" height:220px; padding:5px 0px;">
             <div class="easyui-tabs gray_tab" data-options="plain:false,border:true,fit:true">
                <div title="基本信息">  
                    <table class="form_table noborder">
                        <col width="120px"/>
                        <tbody>
                            <tr>
                                <th>编号：</th>
                                <td><input type="text" id="DialogCode" name="DialogCode" class="easyui-validatebox imedisable" data-options="required:true,validType:['length[1,16]','Account']" /></td>
                            </tr>
                            <tr>
                                <th>标题：</th>
                                <td><input type="text" id="Title" name="Title" class="easyui-validatebox"  data-options="required:true,validType:['length[1,32]']"  /></td>
                            </tr>
                            <tr>
                                <th>HQL</th>
                                <td>
                                    <textarea name="HQL" class="easyui-validatebox" data-options="required:true" style="width:250px; height:80px; margin:0px;"></textarea>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>    
            </div>
        </div>
        <div region="center" border="false">
            <table class="easyui-datagrid" id="details" data-options="fit:true,rownumbers:true,singleSelect:true
            ,onClickRow: onClickRow,onDblClickRow:onDblClickRow,onAfterEdit:onAfterEdit,pagination:false,border:true">
               <thead>  
                   <tr>  
                       <th data-options="field:'id',checkbox:true"></th>
                       <th data-options="field:'FieldKey',width:120,editor:{type:'validatebox',options:{required:true,validType:['length[1,16]','Account']}}">编号</th>
                       <th data-options="field:'Title',width:150,editor:{type:'validatebox',options:{required:true,validType:['length[1,64]']}}">标题</th>
                       <th data-options="field:'Width',width:100,editor:{type:'numberbox',options:{required:true,min:0,max:10000}}">宽度</th>
                       <th data-options="field:'Sort',width:100,editor:{type:'numberbox',options:{required:true,min:0,max:10000}}">排序</th>
                       <th data-options="field:'IsShow',width:100,align:'center',formatter:boolformat,editor:{type:'checkbox',options:{on:'是',off:'否'}}">是否显示</th>
                   </tr>  
               </thead>  
            </table>
        </div>
    </div>
    </div>
    <div region="south"  class="tools_box1">
       <div class="tools_bar foot_tool">
          <div class="foot_msg"> </div>
       </div>
    </div>
    <div region="east" data-options="border:false" class="commands"  >
        <div class="easyui-panel"  data-options="fit:true" style="overflow:hidden;">
            <div id="panConfirm">
                 <a href="javascript:void(0);" onclick="confirm_click()" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定</a>  
                 <a href="javascript:void(0);" onclick="cancel_click()"   class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a> 
            </div>
        </div>
    </div>
</div>
</body>
}
